<template>
	<view class="">
		<!-- 顶部导航 -->
		<view class="login">
			<view style="display: flex;">
				<view class="login-type" :class="active?'active':''" @click="checkActive(true)">修改密码</view>
				<view class="login-type" :class="!active?'active':''" style="text-align: left;"
					@click="checkActive(false)">重置密码</view>
			</view>
			<view class="u-m-t-50">
				<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
					<u-form-item v-if="active" :label-position="labelPosition" prop="password" label-width="120">
						<u-input :border="border" placeholder="请输入原密码" v-model="form.password" type="text"></u-input>
					</u-form-item>
					<u-form-item v-if="active" :label-position="labelPosition" prop="newpassword" label-width="120">
						<u-input :border="border" placeholder="请输入新密码" v-model="form.newpassword" type="text"></u-input>
					</u-form-item>
					<u-form-item v-if="active" :label-position="labelPosition" prop="againpassword" label-width="120">
						<u-input :border="border" placeholder="请再次确认密码" v-model="form.againpassword" type="text">
						</u-input>
					</u-form-item>
					<u-form-item v-if="!active" :label-position="labelPosition" prop="mobile" label-width="120">
						<u-input :border="border" placeholder="请输入手机号" v-model="form.mobile" type="number"></u-input>
					</u-form-item>
					<u-form-item v-if="!active" :label-position="labelPosition" prop="captcha" label-width="120">
						<u-input :border="border" placeholder="请输入验证码" v-model="form.captcha" type="text"></u-input>
						<u-button hover-class="none" type="primary" slot="right"
							:custom-style="{ backgroundColor: getCodebgColor, color: getCodeColor }" size="mini"
							@click="getCode">
							{{ codeTips }}
						</u-button>
					</u-form-item>
					<u-form-item v-if="!active" :label-position="labelPosition" prop="newpassword" label-width="120">
						<u-input :border="border" v-model="form.newpassword" placeholder="请输入新密码" type="password">
						</u-input>
					</u-form-item>
				</u-form>
			</view>
			<view class="u-m-t-80">
				<u-button hover-class="none" type="primary"
					:custom-style="{ backgroundColor: theme.bgColor, color: theme.color }" shape="circle"
					@click="editPassword()">
					确定
				</u-button>
			</view>

		</view>
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	import {
		loginfunc
	} from '@/common/fa.mixin.js';
	export default {
		mixins: [loginfunc],
		onLoad() {
			// #ifdef MP-WEIXIN || APP-PLUS
			this.isThreeLogin = true;
			// #endif

			// #ifdef H5
			if (this.$util.isWeiXinBrowser()) {
				this.isThreeLogin = true;
			}
			// #endif
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				active: true,
				getCodebgColor: "transparent",
				getCodeColor: "rgb(222, 36, 21)",
				labelPosition: 'left',
				border: false,
				errorType: ['message'],
				form: {
					mobile: '',
					captcha: '',
					password: '',
					newpassword: '',
					againpassword: ''
				},
				rules: {
					mobile: [{
							required: true,
							message: '请输入手机号码',
							// 可以单个或者同时写两个触发验证方式
							trigger: ['change', 'blur']
						},

						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur']
						}
					],
					newpassword: [{
						required: true,
						message: '请输入新密码',
						trigger: 'blur'
					}],
					againpassword: [{
						required: true,
						message: '请输入新密码',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					captcha: [{
						required: true,
						message: '请输入验证码',
						trigger: 'change'
					}]
				},
				isThreeLogin: false,
				codeTips: ''
			};
		},
		methods: {
			checkActive(type) {
				this.active = type;
				this.form = {
					mobile: '',
					captcha: '',
					password: '',
					newpassword: '',
					againpassword: ''
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode: async function() {
				if (!this.$u.test.mobile(this.form.mobile)) {
					this.$u.toast('手机号码格式不正确！');
					return;
				}
				if (this.$refs.uCode.canGetCode) {
					let res = await this.$api.getSmsSend({
						mobile: this.form.mobile,
						event: 'resetpwd'
					});
					this.$u.toast(res.msg);
					if (res.code == 1) {
						this.$refs.uCode.start();
					}
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			goPage(url) {
				console.log(url);
				this.$u.route(url);
			},
			goThreeLogin: async function() {
				// #ifdef MP-WEIXIN
				this.$u.route('/pages/login/wxlogin');
				// #endif

				// #ifdef H5
				this.goAuth();
				// #endif

				// #ifdef APP-PLUS
				this.goAppLogin();
				// #endif
			},
			editPassword: function() {
				if (this.active) {
					this.$refs.uForm.validate(async valid => {
						console.log('valid', valid)
						if (valid) {

							if (!(escape(this.form.newpassword).indexOf( "%u" )<0)) {
								this.$u.toast('密码不能输入中文！');
								return false;
							}
							if (this.form.newpassword != this.form.againpassword) {
								this.$u.toast('密码不一致！');
								return false;
							}
							
							// return
							
							let res = await this.$api.resetpassword({
								oldpassword: this.form.password,
								newpassword: this.form.newpassword
							});
							
							
							this.$u.toast(res.msg);
							if (res.code == 1) {
								setTimeout(() => {
									this.$u.route({
										url: '/pages/login/mobilelogin',
										type: 'redirect'
									})
								}, 800);
							}
							
						} else {
							this.$u.toast('验证失败');
						}
					});
				} else {
					this.$refs.uForm.validate(async valid => {
						if (valid) {
							
							if (this.form.newpassword.match(/[\x01-\xFF]*/) == false) {
								this.$u.toast('密码不能输入中文！');
								return false;
							}
							
							let res = await this.$api.goResetpwd({
								type: "mobile",
								mobile: this.form.mobile,
								// email: this.form.account,
								newpassword: this.form.newpassword,
								captcha: this.form.captcha
							});
							this.$u.toast(res.msg);
							if (res.code == 1) {
								setTimeout(() => {
									this.$u.route({
										url: '/pages/login/mobilelogin',
										type: 'redirect'
									})
								}, 800);
							}
							
						} else {
							this.$u.toast('验证失败');
						}
					});
				}
			},
			goLogin: function() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						if (this.vuex_invite_id) {
							this.form.invite_id = this.vuex_invite_id;
						}
						if (this.active) {
							let res = await this.$api.mobilelogin(this.form);
							if (!res.code) {
								this.$u.toast(res.msg);
								return;
							}
							this.$u.vuex('vuex_token', res.data.token);
							this.$u.vuex('vuex_user', res.data.user || {});
							this.success(1);
						} else {
							this.form.account = this.form.mobile;
							let res = await this.$api.goLogin(this.form);
							if (!res.code) {
								this.$u.toast(res.msg);
								return;
							}
							this.$u.vuex('vuex_token', res.data.token);
							this.$u.vuex('vuex_user', res.data.user || {});
							this.success(1);
						}

					} else {
						this.$u.toast('验证失败');
					}
				});
			}
		}
	};
</script>

<style>
	/deep/ .u-form-item__message {
		margin-top: 35px !important;
	}

	.u-form-item {
		background: #f5f5f5;
		border-radius: 80rpx;
		padding: 5rpx 30rpx !important;
		margin-bottom: 40rpx;
	}

	page {
		background-color: #ffffff;
	}

	.login {
		padding: 80rpx 100rpx 0 100rpx;
	}

	.other {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 40rpx;
	}

	.login-type {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.active {
		background-image: url(../../static/image/loginBg.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-size: 20px;
		padding: 5px 6px;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
	}
</style>
